<template>
    <div>
      <div v-transfer-dom>
        <popup v-model="showNotice" height="100%">
          <div class="showNotice-popup">
              <h3>微信报警注意事项</h3>
              <p>1.本系统为自助式报警系统；</p>
              <p>2.请依据事实填写相关信息，联系电话、事发地址、报警内容等务必填写详细，以方便民警能快速联系到您；</p>
              <p>3.所有选项必须填写完整，才能提交；</p>
              <p>4.对虚构事实、隐瞒真相的，应承担相应的法律责任。</p>
          </div>
          <div class="btn-box" style="margin-top: 30px;">
            <x-button type="primary" @click.native="showNotice=!showNotice">阅读并同意</x-button>
            <x-button type="default" plain style="margin-top: 30px;" @click.native="goBack">暂不报警</x-button>
          </div>
        </popup>
      </div>
      <group label-width="100px" label-margin-right="15px" label-align="left">
        <x-input title='电话:' :max="11" required></x-input>
        <selector title="地区:" :options="list" placeholder="请选择地区" v-model="selector01"></selector>
        <selector title="是否方便接听来电:" :options="list2" placeholder="是否方便接听来电"  v-model="selector02"></selector>
        <x-textarea title="报警内容:" :show-counter="false" placeholder="报警" :height="100"></x-textarea>
        <x-input title='报警地点:'></x-input>
      </group>
      <p style="color: #666; padding: 0 15px;">如定位不准确，请修改。例：-路-单位-部门等</p>
      <div class="map">
        腾讯地图？
      </div>
      <div class="btn-box" style="margin-top: 30px;">
        <x-button type="primary" link="/call110/result">提交</x-button>
      </div>
    </div>
</template>
<script type="text/ecmascript-6">
  import { TransferDom,Popup,XButton,Group,Selector,XInput,XTextarea  } from 'vux'
  export default {
    data(){
      return {
        showNotice:true,
        selector01:'姑苏区',
        list: ['姑苏区', '吴中区', '工业园区'],
        selector02:false,
        list2: [{key: true, value: '是'}, {key: false, value: '否'}]
      }
    },
    methods:{
      goBack(){
        this.$router.push('/')
      }
    },
    directives: {
      TransferDom
    },
    components:{
      Popup,
      XButton,
      Group,
      Selector,
      XInput,
      XTextarea
    }
  }
</script>
<style  lang="less" scoped>
  .showNotice-popup {
    width:100%;
    padding: 20px;
    h3 {
      font-size: 18px;
      padding: 5px;
      border-bottom: 1px solid #D9D9D9;
      margin-bottom: 15px;
    }
    p {
      line-height: 24px;
      margin-bottom: 5px;
    }
  }
  .map {
    padding: 15px;
  }
</style>
